<template>
  <view class="con-week">
    <view class="m-box">
      <view class="m-item" :class="index==mIndex?'active':''" v-for="(item,index) in mList" :key="index" @tap="changeWeek(item,index)">
        <view>第{{index==0?'一':index==1?'二':index==2?'三':index==3?'四':index==4?'五':index==5?'六':index==6?'七':''}}周</view>
      </view>
    </view>
    <view class="tj-box">
      <view class="tj-item" :class="info&&info.average_workhour.value==0?'no':''">
        <view class="title">{{ info?info.average_workhour.value:0 }}</view>
        <view class="desc">平均工時</view>
      </view>
      <view class="tj-item" :class="info&&info.attendance_days.value==0?'no':''">
        <view class="title">{{ info?info.attendance_days.value:0 }}</view>
        <view class="desc">出勤天數</view>
      </view>
      <view class="tj-item" :class="info&&info.holiday.value==0?'no':''">
        <view class="title">{{ info?info.holiday.value:0 }}</view>
        <view class="desc">休息天數</view>
      </view>
      <view class="tj-item" :class="info&&info.chidao.value==0?'no':''">
        <view class="title">{{ info?info.chidao.value:0 }}</view>
        <view class="desc">遲到</view>
      </view>
      <view class="tj-item" :class="info&&info.zaotui.value==0?'no':''">
        <view class="title">{{ info?info.zaotui.value:0 }}</view>
        <view class="desc">早退</view>
      </view>
      <view class="tj-item" :class="info&&info.miss_card.value==0?'no':''">
        <view class="title">{{ info?info.miss_card.value:0 }}</view>
        <view class="desc">缺卡</view>
      </view>
      <view class="tj-item" :class="info&&info.waiqin.value==0?'no':''">
        <view class="title">{{ info?info.waiqin.value:0 }}</view>
        <view class="desc">外勤</view>
      </view>
      <view class="tj-item" :class="info&&info.ask_leave.value==0?'no':''">
        <view class="title">{{ info?info.ask_leave.value:0 }}</view>
        <view class="desc">請假</view>
      </view>
    </view>
    <view class="d-footer" @tap="jumpPages()">
      查看详情
    </view>
  </view>
</template>
<script>
import {attendanceMonthweeks,attendanceStatistics} from '../../../utils/userApi'
export default {
  data() {
    return {
      mIndex:0,
      mList:[],
      info:null,
    }
  },
  props:{
    month:{
      type:Number,
      default:0,
    }
  },
  watch:{
		month: {
			handler(newVal,oldVal) {
				if (newVal) {
          let year=this.$moment().format('YYYY')
          let nowMonthIndex=parseInt(this.month-1)
          this.getAttendanceMonthweeks(year,this.month)
				}
			},
			immediate: true
		}
  },
  created() {
  },
  methods:{
    jumpPages(){
      uni.navigateTo({ url: '/pages/boss/statistics' })
    },
    changeWeek(item,index){
      this.mIndex=index
      this.getData(item)
    },
    async getAttendanceMonthweeks(year,month){
      let res=await attendanceMonthweeks({year:year,month:month})
      if(res.code==1){
        this.mList=res.data
        this.getData(res.data[this.mIndex])
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
    async getData(day){
      let res=await attendanceStatistics({start_date:day.begin_date,end_date:day.end_date})
      if(res.code==1){
        this.info=res.data
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.m-box{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 6px;
}
.m-item{
  width: 25%;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  margin: 0 0 6px 0;
}
.m-item view{
  width: 78px;
  height: 28px;
  text-align: center;
  line-height: 28px;
}
.m-item.active view{
  color: #fff;
  border-radius: 14px;
  background: #1C7AF7;
}
.tj-box{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 20px;
}
.tj-item{
  width: 33.33%;
  height: 70px;
  text-align: center;
}
.title{
  height: 24px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 800;
  font-size: 24px;
  color: #333333;
  line-height: 36px;
}
.desc{
  height: 18px;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  padding: 10px 0;
}
.tj-item.no{
  .desc{
    color: #B9B9B9;
  }
  .title{
    color: #B9B9B9;
  }
}
.d-footer{
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 14px;
  color: #666666;
  border-top: 0.5px solid #E1E1E1;
}
</style>